<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>详细光谱信息</title>
        <%-- 全站样式 --%>
        <jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
    </head>

    <body class="page-body skin-navy">
        <div class="page-container">
           <%--侧边栏 --%>
		<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>   
            <div class="main-content">
                <%--导航栏 --%>
				<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>   
                <div class="page-title">
                    <div class="title-env">
                        <h1 class="title">光谱信息</h1>
                        <p class="description">您可以在此页面上查看光谱的详细信息</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 gallery-right">
                        <!-- Default panel -->
                        <div class="panel panel-default">
                            <!-- Add class "collapsed" to minimize the panel -->
                            <div class="panel-heading">
                                <h3 class="panel-title">光谱名称</h3>
                                <div class="panel-options">
                                    <a href="#" data-toggle="panel">
                                        <span class="collapse-icon">&ndash;</span>
                                        <span class="expand-icon">+</span>
                                    </a>
                                </div>
                            </div>
                            <div class="panel-body">
                                 <p><strong>光谱名称：</strong>${spectrumDetail[0].spectrumName}</p>
                                 <p><strong>光谱描述：</strong>${spectrumDetail[0].spectrumDescription}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <!-- Collapsed panel -->
                        <div class="panel panel-default">
                            <!-- Add class "collapsed" to minimize the panel -->
                            <div class="panel-heading">
                                <h3 class="panel-title">光谱详细信息</h3>
                                <div class="panel-options">
                                    <a href="#" data-toggle="panel">
                                        <span class="collapse-icon">–</span>
                                        <span class="expand-icon">+</span>
                                    </a>
                                </div>
                            </div>
                            <div class="panel-body">
                                <section class="invoice-env">
                                    <!-- Invoice header -->
                                    <div class="invoice-header">
                                        <!-- Invoice Options Buttons -->
                                        <div class="invoice-options hidden-print">
                                            <a href="javascript:;" onclick="window.print();" class="btn btn-block btn-secondary btn-icon btn-icon-standalone btn-icon-standalone-right btn-single text-left">
                                                <i class="fa-print"></i>
                                                <span>打印</span>
                                            </a>
                                        </div>
                                        <!-- Invoice Data Header -->
                                        <div class="invoice-logo">
                                            <ul class="list-unstyled">
                                                <li class="upper">
                                                    <strong>光谱类型：</strong>${spectrumDetail[0].spectrumType}
                                                </li>
                                                <li>
                                                    <strong>光谱文件类型：</strong>红外光谱
                                                </li>
                                                <li>
                                                    <strong>硬件类型：</strong>${spectrumDetail[0].hardwareName}
                                                </li>
                                                <li>
                                                    <strong>是否标准库：</strong>
                                                    <c:choose>
                                                        <c:when test="${spectrumDetail[0].isStandardSpectrum==0}">否</c:when>
                                                        <c:otherwise>是</c:otherwise>
                                                    </c:choose>

                                                                                        </li>
                                                <li>
                                                    <strong>保存时间：</strong>${spectrumDetail[0].saveTime}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- Client and Payment Details -->
                                    <div class="invoice-details">
                                        <div class="invoice-client-info">
                                            <strong>被检测物</strong>
                                            <ul class="list-unstyled">
                                                <li>学名：</li>
                                                <li>产地：</li>
                                            </ul>
                                            <ul class="list-unstyled">
                                                <li>大米</li>
                                                <li>${spectrumDetail[0].categoryOrigin}</li>
                                            </ul>
                                        </div>
                                        <div class="invoice-payment-info">
                                            <strong>检测内容</strong>
                                            <ul class="list-unstyled">
                                                    <li></li>
                                                    <li></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="invoice-details">
                                        <div class="invoice-client-info">
                                            <strong>特征峰值：</strong>
                                            <ul class="list-unstyled">
                                                <li>${spectrumDetail[0].characteristicPeak}</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <hr>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>

                <section class="gallery-env">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="album-header">
                                <h2>光谱图像</h2>

                                <ul class="album-options list-unstyled list-inline">
                                    <li>
                                        <a href="#">
                                            <i class="fa-download"></i> 下载谱图
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <img src="${spectrumDetail[0].spectrumPicture}"/>
                        </div>
                    </div>
                </section>
                
		<%--页脚 --%>
		<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>   
            </div>
        </div>

        <div class="page-loading-overlay ">
            <div class="loader-2 "></div>
        </div>
        <!-- Gallery Delete Image (Confirm)-->
        <div class="modal fade" id="gallery-image-delete-modal" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <div class="modal-header">
                        <h4 class="modal-title">Confirm Image Deletion</h4>
                    </div>
                    
                    <div class="modal-body">
                    
                        Do you really want to delete this image?
                        
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-danger">Delete</button>
                    </div>
                </div>
            </div>
        </div>

        <%-- 尾部内容 --%>
        <jsp:include page="/WEB-INF/jsps/template_tail.jsp" />
        
        <!--Specific JS for this page-->
        <script type="text/javascript ">
            jQuery(document).ready(function($) {
                // Notifications
                setTimeout(function() {
                    var opts = {
                        "closeButton ": true,
                        "debug ": false,
                        "positionClass ": "toast-top-right toast-default ",
                        "toastClass ": "black ",
                        "onclick ": null,
                        "showDuration ": "100 ",
                        "hideDuration ": "1000 ",
                        "timeOut ": "5000 ",
                        "extendedTimeOut ": "1000 ",
                        "showEasing ": "swing ",
                        "hideEasing ": "linear ",
                        "showMethod ": "fadeIn ",
                        "hideMethod ": "fadeOut "
                    };
                }, 2000);
            });
        </script>
        <script type="text/javascript">
            // Sample Javascript code for this page
            jQuery(document).ready(function($) {
                
                // Delete Modal-1
                $('.gallery-env a[data-action="trash"]').on('click', function(ev) {
                    ev.preventDefault();
                    $("#gallery-image-delete-modal").modal('show');
                });
                
                
            });
        </script>
    
    </body>
                
</html>